<template>
  <div>
    <table>
      <thead>
      <tr>
        <th>name</th>
        <th>age</th>
        <th>price</th>
      </tr>

      </thead>
    </table>
    <div id="scrollArea" class="clusterize-scroll">
      <table>
        <tbody id="contentArea">
        <tr v-for="item in tableData">
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.price}}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  export default {
    name: "GridView",
    computed: {
      tableData() {
        let arr = [];
        // 秒开 Clusteriza
        for (let i = 0; i < 400; i++) {
          arr.push({name: '张' + i, age: i, price: i * 10})
        }
        return arr;
      }
    },
    mounted() { // 微任务  setTimeout:宏任务
      // this.$nextTick(() => {
      //   let clusterize = new Clusterize({
      //     scrollId: 'scrollArea',
      //     contentId: 'contentArea'
      //   });
      //   console.log(clusterize.getRowsAmount());
      // })

      let clusterize = new Clusterize({
        scrollId: 'scrollArea',
        contentId: 'contentArea'
      });
      // setTimeout(() => {
      //   for (let i = 4000; i < 80000; i++) {
      //     clusterize.append(['<tr><td>123</td><td>123</td><td>123</td></tr>','<tr><td>123</td><td>123</td><td>123</td></tr>'])
      //   }
      //   console.dir(clusterize.getRowsAmount());
      // }, 2000);
    }
  }
</script>

<style scoped>
  table {
    border: 2px solid #65b687;
    border-radius: 3px;
    background-color: #fff;
  }

  /*user-select : 不能选择*/

  th {
    background-color: #5897b0;
    color: #fff;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
  }

  th, td {
    min-width: 120px;
    padding: 10px 20px;

  }

  .clusterize-scroll {
    height: 500px;
    overflow-y: auto;
  }

</style>
